<!-- 项目列表 -->
<template>
  <a-card :bordered="false" class="card-area">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="工程名称" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <a-input placeholder="请输入工程名称" v-model="queryParam.constructionName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目开工时间">
              <j-date v-model="queryParam.projectTimeStart" style="width:220px" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目完成时间">
              <j-date v-model="queryParam.projectTimeEnd" :show-time="true" style="width:220px" />
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery(1)">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="margin-top: 5px">
      <a-button v-if="btnEnableList.indexOf(1) > -1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource1"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <!-- <a @click="myHandleDetail(record, '项目列表')">查看</a> -->
          <a @click="go(record)">查看</a>
          <a-divider v-if="btnEnableList.indexOf(1) > -1" type="vertical" />
          <a v-if="btnEnableList.indexOf(1) > -1" @click="myHandleEdit(record)">编辑</a>
          <a-divider v-if="btnEnableList.indexOf(1) > -1" type="vertical" />
          <a-popconfirm v-if="btnEnableList.indexOf(1) > -1" title="确定删除吗?" @confirm="() => onDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
        <template slot="steps" slot-scope="step">
          <a-tag v-if="step == '0'" color="red">等待报价</a-tag>
          <a-tag v-if="step == '1'" color="yellow">等待上传合同</a-tag>
          <a-tag v-if="step == '2'" color="blue">指派项目经理</a-tag>
          <a-tag v-if="step == '3'" color="pink">施工中</a-tag>
          <a-tag v-if="step == '4'" color="black">等待验收</a-tag>
          <a-tag v-if="step == '5'" color="green">已完成</a-tag>
        </template>
      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
    <project-list-modal ref="modalForm" @ok="modalFormOk"></project-list-modal>
    <bill-detail ref="modalDetail"></bill-detail>
  </a-card>
</template>
<script>
import projectListModal from './constructionsite/projectListModal'
import BillDetail from '../bill/dialog/BillDetail'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { BillListMixin } from '../bill/mixins/BillListMixin'
import { findProjectList, deleteEngineering } from '@/api/api'
import JDate from '@/components/jeecg/JDate'
import Vue from 'vue'
export default {
  name: 'projectList',
  mixins: [JeecgListMixin, BillListMixin],
  components: {
    projectListModal,
    BillDetail,
    JDate
  },
  inject: ['reload'],
  data() {
    return {
      dataSource1: [],
      current: 1,
      arrList: [],
      // 查询条件
      queryParam: {
        constructionName: '',
        projectTimeStart: '',
        projectTimeEnd: '',
        number: '',
        materialParam: '',
        type: '其它',
        subType: '采购订单',
        roleType: Vue.ls.get('roleType')
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // 表头
      columns: [
        { title: '项目ID', dataIndex: 'id', width: 80 },
        { title: '客户名称', dataIndex: 'createUserName', width: 100 },
        { title: '工程名称', dataIndex: 'constructionName', width: 120 },
        { title: '开工时间', dataIndex: 'projectStartTime', width: 120 },
        { title: '预计完成时间', dataIndex: 'projectExpectedTime', width: 120 },
        { title: '完成时间', dataIndex: 'projectAccomplishTime', width: 120 },
        { title: '添加时间', dataIndex: 'createTime', width: 120 },
        { title: '添', dataIndex: 'createUse;', width: 120 },
        { title: '添加人', dataIndex: 'createUser', width: 120 },
        {
          title: '步骤',
          dataIndex: 'step',
          width: 80,
          scopedSlots: { customRender: 'steps' }
        },
        {
          title: '金额',
          dataIndex: 'money',
          width: 60
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        // list: "/depotHead/list",
        list: '/engineering/listHead',
        // delete: "/depotHead/delete",
        deleteBatch: '/depotHead/deleteBatch',
        batchSetStatusUrl: '/depotHead/batchSetStatus'
      }
    }
  },
  created() {
    this.removeStatusColumn()
    this.detailList()
  },
  updated(){
    console.log(this.ipagination);
  },
  computed: {},
  mounted() {
    // console.log(this.current, 11)
  },
  methods: {
    go(record) {
      this.$router.push({ path: `/engineering/projectListIndex/${record.id}/${record.step}` })
    },
    // 列表数据
    detailList() {
      findProjectList({
        currentPage: 1,
        pageSize: 10}
        ).then(res => {
        if (res.code === 0) {
          res.data.row.map(item => {
            item.money = item.money === null ? '0' : item.money
          })
          res.data.row.map(item => {
            item.step = item.step === '' ? '' : item.step
            // console.log(item.step ,7877)
            this.current = item.step
            // console.log(this.current, 5554)
          })
          this.dataSource1 = res.data.row
          this.ipagination.total = res.data.total
          // console.log(this.ipagination.total,'777')
        }
      })
    },
    // 查询数据
    searchQuery(currentPage=1,pageSize=10) {
      findProjectList({
        currentPage:currentPage,
        pageSize:pageSize,
        constructionName: this.queryParam.constructionName,
        projectTimeStart: this.queryParam.projectTimeStart,
        projectTimeEnd: this.queryParam.projectTimeEnd
      }).then(res => {
        if (res.code === 0) {
          this.dataSource1 = res.data.row
          this.ipagination.total = res.data.total
        }
      })
    },
    onDelete(record) {
      deleteEngineering({
        id: record
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.reload()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    searchReset() {
      this.queryParam = {
        type: this.queryParam.type,
        subType: this.queryParam.subType
      }
      this.searchQuery(1);
    },
    // 分页事件
    handleTableChange(e){
      this.ipagination.current = e.current
      this.searchQuery(e.current)
    }
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>
